<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>socket.io</title>
</head>

<body>
  <div id="root"></div>

  <div>
    <input type="text" oninput="setMsg(this)" id="msg">
    <button onclick="send()">发送数据</button>
  </div>

  <!-- 引用socket.io客户端脚本程序 -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    let formData = {
      msg: ''
    }
    let proxy = {}
    // 数据属性代理
    Object.defineProperty(proxy, 'msg', {
      get() {
        return formData.msg
      },
      set(v) {
        if (v != formData.msg) {
          formData.msg = v
          document.getElementById('msg').value = v
        }
      }
    })

    // 连接websocket服务器，它会自动识别浏览器是否支持，如果不支持它会自动切换模式
    let client = io('/')

    // 监听服务器主动发送过来的数据
    // 参数1：事件类型(名称)
    client.on('message', data => {
      appendRootDom(data)
    })

    function appendRootDom(data) {
      let div = document.createElement('div')
      div.innerHTML = data
      document.querySelector('#root').appendChild(div)
    }

    function setMsg(obj) {
      proxy.msg = obj.value
    }
    // 发送数据
    function send() {
      // send它是一个语法糖 client.emit('message','内容')
      client.send(proxy.msg)
      proxy.msg = ''
    }

  </script>

</body>

</html>